<template>
  <!--头部开始-->
  <div class="indexheader">
    <div class="header_head">
      <div class="head_left">
        <ul>
          <li><a href="#">手机</a><span>|</span></li>
          <li><a href="#">汽车</a><span>|</span></li>
          <li><a href="#">穿戴</a><span>|</span></li>
          <li><a href="#">平板</a><span>|</span></li>
          <li><a href="#">电脑</a><span>|</span></li>
          <li @click="getOrders">
            <a>
              <div class="dropdown">
                <div class="dropbtn">我的订单</div>
              </div>
            </a>
            <div class="triangle"></div>
          </li>
          <li @click="getFavotite"><a>我的喜欢</a></li>
        </ul>
      </div>
      <!-- 未登录状态 -->
      <div class="head_right">
        <ul v-if="token === ''">
          <li><a class="log" @click="getLogin">登录</a><span>|</span></li>
          <li><a class="reg" @click="getRegister">注册</a><span>|</span></li>
          <li><a href="#">消息通知</a></li>
          <li class="cart" @click="toShopping">
            <a>
              <i class="iconfont">&#xe602;
              </i>购物车(0)
            </a>
          </li>
        </ul>
        <!-- 登录状态 -->
        <ul v-else>
          <li class="user"><el-avatar size="medium">user</el-avatar>
          </li>
          <li><a href="#">你好</a></li>
          <li>
            <el-dropdown @command="handleCommand" hide-timeout="300">
              <span class="el-dropdown-link" style="color: #b0b0b0;font-size: 12px;">
                个人中心<i class="el-icon-arrow-down el-icon--right" style="color: #b0b0b0; font-size: 12px;"></i>
              </span>
              <el-dropdown-menu slot="dropdown" placement='top-end'>
                <el-dropdown-item command="a">消息通知</el-dropdown-item>
                <el-dropdown-item command="b">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </li>
          <li class="cart" @click="toShopping">
            <a>
              <i class="iconfont">&#xe602;
              </i>购物车({{ totalNum }})
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  created() {
    const savedToken = localStorage.getItem('token');
    if (savedToken) {
      this.token = savedToken;
    } else {
      this.token = '';
    }
  },
  data() {
    return {
      token: ''
    };
  },
  computed: {
    ...mapState('cart', ['cartData']),
    totalNum() {
      // 累计商品数量
      return this.cartData.reduce((total, item) => total + item.num, 0);
    },
  },
  methods: {
    //跳转购物车
    toShopping() {
      this.$router.push('/shopping')
    },
    // 跳转登录

    getLogin() {
      this.$router.push('/login')
    },
    // 跳转注册
    getRegister() {
      this.$router.push('/register')
    },
    //跳转喜欢
    getFavotite() {
      this.$router.push('/home/favorite')
    },
    //订单页面
    getOrders() {
      this.$router.push('/home/orders')
    },
    //退出登录
    handleCommand(command) {
      // this.$message('click on item ' + command);
      //退出登录删除令牌
      if (command === 'b') {
        // 清除本地存储中的 token
        localStorage.removeItem('token');
        this.$router.push('/login')
      }
    }
  },
}
</script>

<style lang="less" scoped>
@import url('../../assets/css/font_4367545_5vuckvup5pp/iconfont.css');

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 10px;
}

.user {
  margin-top: 2px
}

.indexheader {
  cursor: pointer;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: #333;
  font-size: 12px;

  .header_head {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 100%;

    .head_left {
      width: 900px;
      height: 100%;

      ul {
        display: flex;
        justify-content: space-around;
      }

      a {
        color: #b0b0b0;

        &:hover {
          color: #fff;
        }
      }

      span {
        color: #424242;
        margin: 0 6px;
      }

      .dropdown {
        position: relative;
        display: inline-block;

        &:hover .dropdown-content {
          display: block;
        }
      }

      .dropdown-content {
        display: flex;
        flex-wrap: wrap;
        display: none;
        position: absolute;
        width: 90px;
        height: 90px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;

        img {
          width: 90px;
          height: 90px;
          text-align: center;
        }

        a {
          font-size: 12px;
          color: black;
          text-decoration: none;
          display: block;

          &:hover {
            background-color: #fff;

          }
        }
      }
    }

    .head_right {

      width: 400px;
      height: 100%;

      ul {
        display: flex;
        justify-content: space-between;

        li {
          height: 40px;
          // border: 1px solid #cd0e0e;
        }
      }

      a {
        cursor: pointer;
        color: #b0b0b0;

        &:hover {
          color: #fff;
        }
      }

      span {
        color: #424242;
        margin: 0 6px;
      }

      /*购物车*/
      .cart {
        position: relative;
        width: 120px;
        height: 40px;
        background-color: #424242;
        margin-left: 25px;
        cursor: pointer;
        text-align: center;
      }

      .cart i {
        margin-right: 4px;
      }

      .cart:hover {
        background-color: #fff;
      }

      /*鼠标悬停在li上 里面的a字体颜色变为橘色*/
      .cart:hover>a {
        color: #ff6700;
        background-color: #fff;
      }

      .cart-list {
        z-index: 850;
        position: absolute;
        top: 40px;
        right: 0;
        width: 316px;
        /*元素高度设置为0*/
        height: 0;
        /*元素中的内容溢出*/
        overflow: hidden;
        line-height: 100px;
        background-color: #fff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
        transition: all .3s;
      }

    }
  }
}
</style>